<link href="/classico/public/assets/all-site/css/jquery-ui.min.css"
      rel="stylesheet" type="text/css"/>
<link href="/classico/public/assets/back-end/css/product/add.css"
      rel="stylesheet" type="text/css"/>
<script type="text/javascript"
        src="/classico/public/assets/all-site/js/jquery-ui.min.js"></script>
<script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIqgbRzPinsk6Cz3j4dflntZF09sqz2QI&sensor=true">
</script>
<script type="text/javascript" src="/classico/public/assets/trivial/google-map/google-map.js">
</script>
<div class="system-messages">
    <ul>
        <?php
        $messages = $this->messages;
        foreach ($messages as $message) :
            ?>
            <li><?= $message ?></li>
        <?php
        endforeach
        ?>
    </ul>
</div>
<?php
/** @var ProductPOJO $productPOJO */
$productPOJO = $this->productPOJO;
?>
<div class="admin-input-form-wrap">
    <div id="left">
        <form method="post">
            <div id="basic-info" class="admin-input-form">
                <div id="basic-info-table">
                    <table>
                        <tr>
                            <td><label for="name">Name</label></td>
                            <td>
                                <input id="name" type="text" name="name"
                                       value="<?= $productPOJO == null ?
                                           $this->name : $productPOJO->Name ?>"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="image">Image</label></td>
                            <td>
                                <input id="image" type="text" name="image"
                                       value="<?= $productPOJO == null ?
                                           $this->image : $productPOJO->Image ?>"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="expired">Expired</label></td>
                            <td>
                                <input id="expired" type="text" name="expired"
                                       value="<?= $productPOJO == null ?
                                           $this->expired : $productPOJO->Expired->get('d - M - y') ?>"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="orginal-amount">Orginal Amount</label></td>
                            <td>
                                <input id="orginal-amount" type="text" name="orginalAmount"
                                       value="<?= $productPOJO == null ?
                                           $this->orginalAmount : $productPOJO->OrginalAmount ?>"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="old-price">Old Price</label></td>
                            <td>
                                <input id="old-price" type="text" name="oldPrice"
                                       value="<?= $productPOJO == null ?
                                           $this->oldPrice : $productPOJO->OldPrice ?>"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="new-price">New Price</label></td>
                            <td>
                                <input id="new-price" type="text" name="newPrice"
                                       value="<?= $productPOJO == null ?
                                           $this->newPrice : $productPOJO->NewPrice ?>"/>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="product-type-id">Product Types</label></td>
                            <td>
                                <select id="product-type-id" name="productTypeID">
                                    <option value="0">-- Product Type --</option>
                                    <?php
                                    $selectedProductTypeID = $productPOJO == null ?
                                        $this->selectedProductTypeID : $productPOJO->ProductTypeID;

                                    /** @var ProductTypePOJO[] $productTypePOJOs */
                                    $productTypePOJOs = $this->productTypePOJOs;
                                    foreach ($productTypePOJOs as $productTypePOJO) :
                                        if ($selectedProductTypeID &&
                                            $productTypePOJO->ID == $selectedProductTypeID
                                        ) :
                                            ?>
                                            <option value="<?= $productTypePOJO->ID ?>"
                                                    selected="selected">
                                                <?= $productTypePOJO->Name ?>
                                            </option>
                                        <?php
                                        endif;
                                        if (!$selectedProductTypeID ||
                                            $productTypePOJO->ID != $selectedProductTypeID
                                        ) :
                                            ?>
                                            <option value="<?= $productTypePOJO->ID ?>">
                                                <?= $productTypePOJO->Name ?>
                                            </option>
                                        <?php
                                        endif;
                                    endforeach
                                    ?>
                                </select>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="description-box" class="admin-input-form">
                <label>
                    <textarea id="description" name="description"
                              spellcheck="false"><?= $productPOJO == null ?
                            $this->description : $productPOJO->Description ?></textarea>
                </label>
            </div>
            <input type="hidden" name="isPost" value=""/>
        </form>
        <div class="admin-input-form"></div>
    </div>
    <div id="right">
        <div id="google-map" class="admin-input-form">
        </div>
        <div id="google-map-tools">
            <div class="admin-search-n-filter">
                <div class="admin-search">
                    <label><input type="text"/></label>
                    <input type="button" value=""/>
                </div>
                <div class="admin-hyperlink-btn">
                    <a id="refresh-google-map">
                        Refresh
                    </a>
                </div>
                <div class="admin-hyperlink-btn">
                    <a id="move-to-flag-google-map">
                        Move To Flag
                    </a>
                </div>
                <div class="admin-filter">
                    <label>
                        <select>
                            <option>-- Location --</option>
                        </select>
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#expired').datepicker({
            dateFormat: 'dd - mm - yy'
        });
    });
</script>
<script type="text/javascript">
    var lat = parseFloat('<?= $productPOJO == null ? $this->lat : $productPOJO->Lat ?>');
    var lng = parseFloat('<?= $productPOJO == null ? $this->lng : $productPOJO->Lng ?>');
    var googleMap = new GoogleMap('google-map', lat, lng);
    if (lat && lng) {
        googleMap.setFlag(lat, lng);
    }

    function geocode() {
        var keyWords = $('.admin-search input[type = "text"]').val();
        googleMap.searchAddress(
            keyWords,
            function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var firstLocation = results[0].geometry.location;
                    var firstLat = firstLocation.lat();
                    var firstLng = firstLocation.lng();
                    googleMap.setCenter(firstLat, firstLng);

                    var html = "";
                    for (var i = 0; i < results.length; i++) {
                        var location = results[i].geometry.location;
                        var lat = location.lat();
                        var lng = location.lng();
                        var value = lat + '#' + lng;
                        var addressComponents = results[i].address_components;

                        html += '<option value="' + value + '">'
                            + addressComponents[0].short_name
                            + ' (' + addressComponents[1].short_name + ')'
                            + '</option>';
                    }

                    $('.admin-filter select').html('').html(html);
                }
            }
        );

        $('.admin-search input[type = "text"]').val('');
    }

    $('.admin-search input[type = "text"]').keydown(function (event) {
        if (event.which == 13) {
            geocode();
        }
    });

    $('.admin-search input[type = "button"]').click(function () {
        geocode();
    });

    $('.admin-hyperlink-btn #refresh-google-map').click(function () {
        googleMap = new GoogleMap('google-map', null, null);

        googleMap.addRightClickListener(function (event) {
            var lat = event.latLng.lat();
            var lng = event.latLng.lng();
            googleMap.setFlag(lat, lng);
        });

        $('.admin-search input[type = "text"]').val('');
        $('.admin-filter select').html('<option>-- Location --</option>');

        return false;
    });

    $('.admin-hyperlink-btn #move-to-flag-google-map').click(function () {
        googleMap.moveToFlag();
        return false;
    });

    $('.admin-filter select').change(function () {
        var value = $('.admin-filter select').val();
        var array = value.split('#');
        var lat = array[0];
        var lng = array[1];
        googleMap.setCenter(lat, lng);
    });

    googleMap.addRightClickListener(function (event) {
        var lat = event.latLng.lat();
        var lng = event.latLng.lng();
        googleMap.setFlag(lat, lng);
    });
</script>
<script type="text/javascript">
    function submitForm(task) {
        var name = $('#name').val().trim();
        var expired = $('#expired').val();
        var orginalAmount = $('#orginal-amount').val();
        var oldPrice = $('#old-price').val();
        var newPrice = $('#new-price').val();
        var productTypeID = $("#product-type-id").val();
        var description = $('#description').val().trim();
        var flag = googleMap.flag;
        if (!name || !expired || !orginalAmount || !oldPrice
            || !newPrice || productTypeID == 0 || !description || !flag) {
            var content = '';
            if (!name) {
                content += 'Name, ';
            }
            if (!expired) {
                content += 'Expired, ';
            }
            if (!orginalAmount) {
                content += 'Orginal, ';
            }
            if (!oldPrice) {
                content += 'OldPrice, ';
            }
            if (!newPrice) {
                content += 'NewPrice, ';
            }
            if (productTypeID == 0) {
                content += 'ProductType, ';
            }
            if (!description) {
                content += 'Description, ';
            }
            if (!flag) {
                content += 'Flag, ';
            }
            content = content.substr(0, content.length - 2);
            content += ' cannot be blank!';

            var messagesBlock = $('.system-messages > ul');
            messagesBlock.html('');
            messagesBlock.append('<li>' + content + '</li>');
            if (!flag) {
                messagesBlock.append('<li>You must set Flag on Google Map!</li>');
            }
        } else {
            var form = $('#left > form');
            form.append('<input type="hidden" name="expired" value="' + expired + '"/>');
            form.append('<input type="hidden" name="lat" value="' + flag.getPosition().lat() + '"/>');
            form.append('<input type="hidden" name="lng" value="' + flag.getPosition().lng() + '"/>');
            form.append('<input type="hidden" name="task" value="' + task + '"/>');
            form.attr('action', location.href);
            form.submit();
        }
    }

    $('#tool-btn-apply').click(function () {
        var task = 'apply';
        submitForm(task);
    });

    $('#tool-btn-applynclose').click(function () {
        var task = 'apply-and-close';
        submitForm(task);
    });

    $('#tool-btn-applynnew').click(function () {
        var task = 'apply-and-new';
        submitForm(task);
    });
</script>
